<template>
  <div
    class="m-video-detail"
    v-title
    :data-title="$t('router.videoDetailTitle')"
  >
    <Breadcrumb></Breadcrumb>
    <div class="main">
      <div class="vPlayer">
        <!-- :islike="playInfos.likeState" -->
        <videoplayer
          v-if="mp4Url"
          ref="myChild"
          :mp4Url="mp4Url"
          :mp4Pic="playInfos.imgUrl"
          :isDpi="false"
          @toggleQuality="toggleQuality"
        ></videoplayer>
        <div v-else></div>
      </div>
      <div class="title">
        <h1
          class="ellipsis-two"
          v-text="
            $i18n.locale === 'zh'
              ? playInfos.cname || playInfos.name
              : playInfos.name
          "
        ></h1>
        <i
          v-if="userInfo"
          :class="
            playInfos.likeState == 1 ? 'el-icon-star-on' : 'el-icon-star-off'
          "
          id="vjsLike"
          @click="likeClick"
        ></i>
      </div>
      <div class="vPlayerInfo">
        <h2 v-text="$t('main.antholigy')"></h2>
        <ul class="episode">
          <li
            v-for="key of Object.keys(newSections)"
            :key="key"
            v-text="'Part' + key"
            :class="key == activeSections ? 'active' : ''"
            @click="key != activeSections && partToggle(key)"
          ></li>
        </ul>
        <!-- <ul class="episode">
          <li
            v-for="(item, index) of playInfos.sections"
            @click="partToggle(item, index)"
            :class="index == activeSections ? 'active' : ''"
            :key="item.sectionId"
            :style="item.name ? 'display:block' : 'display:none'"
            v-text="$i18n.locale === 'zh' ? item.cname || item.name : item.name"
            :title="$i18n.locale === 'zh' ? item.cname || item.name : item.name"
          ></li>
        </ul> -->
        <div class="sectionsInfo">
          <h1 v-text="$t('main.wonderfulNode')"></h1>
          <ul>
            <li
              :style="item.name ? '' : 'display:none'"
              v-for="item of newSections[activeSections]"
              :key="item.sectionId"
              @click="sectionsToggle(item)"
              v-text="
                $i18n.locale === 'zh' ? item.cname || item.name : item.name
              "
              class="ellipsis"
              :class="
                item.type === 'Work' || item.type === 'Heading'
                  ? 'sectionsHead'
                  : activeChapter == item.sectionId
                  ? 'activeChapter'
                  : 'chapter'
              "
            ></li>
          </ul>
        </div>
      </div>
    </div>
    <el-tabs class="box tab-content" v-model="activeName">
      <el-tab-pane
        :label="$t('main.programIntroduction')"
        name="first"
        class="first"
        v-if="playInfos.blurb || playInfos.cblurb"
      >
        <p
          :class="isIntroduce ? '' : 'ellipsis-two'"
          v-html="
            $i18n.locale === 'zh'
              ? playInfos.cblurb || playInfos.blurb
              : playInfos.blurb || playInfos.cblurb
          "
        ></p>
        <div
          class="unfold"
          v-show="playInfos.blurb"
          @click="isIntroduce = !isIntroduce"
        >
          <i :class="isIntroduce ? 'el-icon-minus' : 'el-icon-plus'"></i>
          {{ isIntroduce ? $t("main.putAway") : $t("main.open") }}
        </div>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('main.performanceInformation')"
        name="second"
        class="second"
      >
        <!-- v-if="playInfos.performer && playInfos.performer.length > 0" -->
        <ul v-loading="fullscreenLoading" class="ul-list">
          <li>
            <span>{{ $t("main.performer") }}：</span>
            <p v-if="performer(1) && performer(1).length > 0">
              <span v-for="item of performer(1)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
              <!-- <span to="" v-for="item of playInfos.performer | performer(1)" :key="item.id">{{$i18n.locale === 'zh' ? item.fullCname : item.fullName}},{{item.stageName}}</span> -->
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.lyrics") }}：</span>
            <p v-if="performer(6) && performer(6).length > 0">
              <span v-for="item of performer(6)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.arranger") }}：</span>
            <p v-if="performer(7) && performer(7).length > 0">
              <span v-for="item of performer(7)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("public.composer") }}：</span>
            <p v-if="performer(8) && performer(8).length > 0">
              <span v-for="item of performer(8)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.command") }}：</span>
            <p v-if="performer(9) && performer(9).length > 0">
              <span v-for="item of performer(9)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.choir") }}：</span>
            <p v-if="performer(10) && performer(10).length > 0">
              <span v-for="item of performer(10)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.ensemble") }}：</span>
            <p v-if="performer(11) && performer(11).length > 0">
              <span v-for="item of performer(11)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.philharmonicOrchestra") }}：</span>
            <p v-if="performer(12) && performer(12).length > 0">
              <span v-for="item of performer(12)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('main.festivalInformation')"
        name="third"
        class="third"
      >
        <ul>
          <li>
            <span>{{ $t("main.issueDate") }}：</span>
            <p>
              {{
                utils.formateDate(playInfos.releaseDate) ||
                $t("public.noInformation")
              }}
            </p>
          </li>
          <li>
            <span>{{ $t("main.place") }}：</span>
            <p>{{ playInfos.venue || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("main.duration") }}：</span>
            <p>{{ playInfos.duration || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("main.number") }}：</span>
            <p>{{ playInfos.upc || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("public.brand") }}：</span>
            <p>{{ playInfos.labelId || $t("public.noInformation") }}</p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import $ from "jquery";
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import videoplayer from "@/components/common/videoPlayer/Index";
export default {
  data() {
    return {
      mp4Url: "",
      // http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
      //"https://juyuan.kuke.com/1625711809561/5bd3ad81f9442eb7042cb27ac2927e9b/mp4/video/700kbps/33468.700kb.part1.mp4",
      activeName: "first",
      isIntroduce: false, //节目介绍-是否展开
      playInfos: {}, //视频详情数据
      fullscreenLoading: false,
      quality: "700", //清晰度
      newSections: {}, //处理后的节点信息
      activeSections: 1,
      activeChapter: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    Breadcrumb,
    videoplayer,
  },
  watch: {},
  created() {
    this.partToggle();
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    // 去重
    // unique(arr) {
    //   return Array.from(new Set(arr));
    // },
    compareTime(key) {
      return function (value1, value2) {
        let val1 = value1[key].split(":").join("");
        let val2 = value2[key].split(":").join("");
        return val1 - val2;
      };
    },
    compareType(type) {
      return function (value1, value2) {
        let val1 = value1[type];
        let val2 = value2[type];
        if (value1.startTime === value2.startTime) {
          if (val1 === "Work" || val1 === "Heading") {
            return -1;
          } else if (val2 === "Work" || val2 === "Heading") {
            return 1;
          } else {
            return 0;
          }
        }
      };
    },
    //获取演奏信息列表- 并把对应id添加到演奏者上
    performer(id) {
      if (this.playInfos.performer) {
        let obj = this.playInfos.performer.find(
          (item) => item.personTypeId == id
        );
        if (obj) {
          // id 赋值
          if (obj.persons.length > 0) {
            return obj.persons;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    //获取片段列表
    sections(type) {
      let arr = [];
      this.playInfos.sections.find((item) => {
        if (item.type == type) {
          arr.push(item);
        }
      });
      return arr;
    },
    // 切换视频清晰度
    toggleQuality(quality) {
      this.quality = quality;
      this.sectionsToggle();
    },
    async partToggle(key) {
      // 检测用户权限
      let allow;
      if (this.$store.getters.loginStatu) {
        let videoParams = {
          token: this.$store.getters.userInfo.token,
          moduleId: 557, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag:1
        };
        allow = await this.$api.user.checkUserPermissions(videoParams);
      } else {
        let videoParams = {
          moduleId: 557, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag:1
        };
        allow = await this.$api.user.checkUserPermissionsByIp(videoParams);
      }
      if (allow.code === 1000000) {
        if (key) {
          this.activeSections = key;
          this.activeChapter = ""; //清除选中样式
        } else {
          this.activeSections = 1;
        }
        let time = +new Date();
        let params = {
          videoId: this.$route.params.id,
          quality: this.quality,
          partNo: this.activeSections,
          time: time,
        };
        let res = await this.$api.user.videoAddress(params);
        this.mp4Url = res.data;
        this.$nextTick(() => {
          this.$refs.myChild.onPlay();
        });
        // this.$refs.myChild.toTime(val.startTime);
      } else {
        this.activeSections = null;
        if (allow.code === 1701101) {
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.accountNotExist"),
            type: "warning",
            offset: 100,
          });
        } else if (allow.code === 1701102) {
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.validityExpired"),
            type: "warning",
            offset: 100,
          });
        } else if (allow.code === 1701103) {
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.organizationValidityExpires"),
            type: "warning",
            offset: 100,
          });
        } else if (allow.code === 1701104) {
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.organizationVideoExpired"),
            type: "warning",
            offset: 100,
          });
        }
      }
    },
    //作品名称片段
    async sectionsToggle(val) {
      this.activeChapter = val.sectionId;
      if (val) this.$refs.myChild.toTime(val.startTime);
    },
    //获取视频详情页数据
    async getDetail() {
      this.fullscreenLoading = true;
      try {
        let params = {
          videoId: this.$route.params.id,
        };
        let res = await this.$api.video.getVideoInfo(params);
        if (res.code === 1000000) {
          this.playInfos = res.source ? res.source : {};
          // let part1 = this.playInfos.sections.map((item) => {
          //   return item.discNum;
          // })
          let obj = {};
          res.source.sections.forEach((item) => {
            if (Object.keys(obj).indexOf("" + item.discNum) === -1) {
              obj[item.discNum] = [];
            }
            obj[item.discNum].push(item);
          });
          Object.keys(obj).forEach((key) => {
            obj[key]
              .sort(this.compareTime("startTime"))
              .sort(this.compareType("type"));
          });
          this.newSections = obj;
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 我喜欢
    async likeClick() {
      let users = {
        type: 2,
      };
      if ($("#vjsLike").hasClass("el-icon-star-on")) {
        $("#vjsLike").removeClass("el-icon-star-on");
        $("#vjsLike").addClass("el-icon-star-off");
        let params = {
          contentIds: this.$route.params.id,
          selectState: 2, //未全选
        };
        await this.$api.user.cancelVideo({ ...users, ...params });
        this.$message({
          showClose: true,
          message: this.$t("public.cancelLike"),
          type: "warning",
          duration: 1000,
        });
        // $("#vjsLike").attr("name", "like");
      } else {
        $("#vjsLike").removeClass("el-icon-star-off");
        $("#vjsLike").addClass("el-icon-star-on");
        let params = {
          contentId: this.$route.params.id,
        };
        await this.$api.user.addVideo({ ...users, ...params });
        this.$message({
          showClose: true,
          message: this.$t("public.likeSuccess"),
          type: "success",
          duration: 1000,
        });
        // $("#vjsLike").attr("name", "is-like");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-video-detail {
  .main {
    .vPlayer {
      width: auto;
      min-height: 212px;
      background: #333333;
      overflow: hidden;
      margin: 0 -20px;
    }
    > .title {
      width: 100%;
      margin-top: 21px;
      display: flex;
      align-items: center;
      > h1 {
        max-height: 48px;
        line-height: 24px;
        font-size: 17px;
      }
      > #vjsLike {
        font-size: 24px;
        margin-left: 10px;
        &.el-icon-star-on {
          color: #d72518;
        }
      }
    }
    > .vPlayerInfo {
      width: 100%;
      height: auto;
      margin: 18px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-top: 1px solid #dadada;
      border-bottom: 1px solid #dadada;
      > h2 {
        margin: 12px 0;
      }
      > .episode {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        border-bottom: 1px solid #dadada;
        > li {
          width: 96px;
          height: 31px;
          line-height: 31px;
          margin-bottom: 12px;
          white-space: nowrap;
          font-size: 14px;
          border-radius: 2px;
          text-align: center;
          border: 1px solid #333333;
          &:last-child {
            margin-right: 0;
          }
          &.active {
            color: #d72518;
            border-color: #d72518;
          }
        }
      }
      > .sectionsInfo {
        > h1 {
          font-size: 17px;
          margin-top: 18px;
        }
        > ul {
          > li {
            &.sectionsHead {
              font-size: 17px;
              padding-top: 13px;
              margin-bottom: 13px;
              font-weight: 500;
              border-top: 1px solid #dadada;
              // pointer-events: none;
              &:first-child {
                border: none;
              }
            }
            &.chapter {
              font-size: 14px;
              margin: 15px 0;
              text-indent: 1em;
            }
            &.activeChapter {
              font-size: 14px;
              margin: 15px 0;
              text-indent: 1em;
              color: #d72518;
            }
          }
        }
      }
    }
  }
  .tab-content {
    .el-tabs__content {
      .el-tab-pane {
        font-size: 14px;
        > ul {
          > li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 11px;
            line-height: 21px;
            color: #000;
            > span {
              white-space: nowrap;
            }
            p {
              color: #666666;
              display: flex;
              flex-wrap: wrap;
              > span {
                margin-right: 18px;
              }
            }
          }
        }
        .unfold {
          color: #999999;
          font-size: 16px;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
